<template>
    <div id="v-left-t">
        <el-row class="e-row-r" type="flex" justify="space-between">
            <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17" class="mb20-u">
                <div class="line-s">
                    <span>工种</span>
                    <div style="width: 100%;height: 100%;" ref="ringChar"></div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7" class="mb20-u">
                <ul class="legend-u">
                    <li v-for="(item,index) in liData" :key="index"><span class="legend-s" :style="{backgroundColor: item.color}"></span><span class="legend-t">{{item.name}}</span></li>
                </ul>
            </el-col>
            <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20-u">
                <div class="line-s">
                    <span>实际出勤</span>
                    <div style="width: 100%;height: 100%;" ref="lineChar"></div>
                </div>
            </el-col> -->
        </el-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw , watchEffect, nextTick } from 'vue';
import * as echarts from 'echarts';
import ecTheme from "/@/assets/echartsConfig/westeros.project.json";
export default defineComponent({
    name:'v-left-t',
    components: {},
    props: {
        letTopData: {
            type: String,
            default: '',
        },
    },
    setup(props){
        const ringChar:Ref = ref(null);
        const lineChar:Ref = ref(null);
        const liData = ref();
        let colorArr = [
            'rgb(6,235,125)',
            'rgb(223,49,69)',
            'rgb(223,184,38)',
            'rgb(255,232,159)',
            'rgb(6,235,125)',
            'rgb(223,49,69)',
            'rgb(223,184,38)',
            'rgb(255,232,159)',
            'rgb(6,235,125)',
            'rgb(223,49,69)',
            'rgb(223,184,38)',
            'rgb(255,232,159)',
            'rgb(6,235,125)',
            'rgb(223,49,69)',
            'rgb(223,184,38)',
            'rgb(255,232,159)',
            'rgb(6,235,125)',
            'rgb(223,49,69)',
            'rgb(223,184,38)',
            'rgb(255,232,159)',
            'rgb(6,235,125)',
            'rgb(223,49,69)',
            'rgb(223,184,38)',
            'rgb(255,232,159)',
        ];
        let isFinish = false;
        echarts.registerTheme('westeros', ecTheme);

        /*** optionRing 饼图 */
        const optionRing = () => {
            let chart: any; 
            chart = echarts.init(ringChar.value as HTMLElement, 'westeros');

            let option = {
                color: colorArr,
                tooltip: {
                    trigger: 'item',
                    position: 'top',
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['30%','60%'],
                        center: ['50%','40%'],
                        data: [],
                        labelLine:{
                            length1: 5,
                            length2: 22,
                        },
                        label: {
                            formatter: '{b}\n{d}%',
                            padding: [0,-20,0,-20],
                            color: '#FFFFFF',
                        },
                    }
                ]
            }
            let setTime = setInterval(() => {
                if(isFinish || liData.value){
                    let seriesData: any = [];
                    if(liData.value.length !== 0){
                        liData.value.map((i: any) => {
                            let seriesObj: any = {};
                            seriesObj.value = i.count;
                            seriesObj.name = i.name;
                            seriesData.push(seriesObj);
                        });
                    }else{
                        seriesData = [];
                    }
                    option.series[0].data = seriesData;
                    clearInterval(setTime);
                    return option && chart.setOption(option)
                }
            },20);
        }

        /*** optionLine 柱状图 */
        const optionLine = () => {
            let chart: any; 
            chart = echarts.init(lineChar.value as HTMLElement, 'westeros');
            let option:any = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'value',
                    data: [],
                    position: 'top',
                    // 轴线设置
                    axisLine:{
                        show: true,
                        lineStyle: {
                            color:'rgba(236, 236, 236,0)',
                        },
                        interval: 0
                    },
                    // 轴线文字内容设置
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgb(21,136,189)"
                        },
                    },
                    // 分割线颜色
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(14 , 54 , 110 , 1)'
                        }
                    },
                    min: 0,
                    max: 200,
                },
                yAxis: {
                    type: 'category',
                    // 轴线设置
                    axisLine:{
                        lineStyle: {
                            color:'rgba(14 , 54 , 110 , 1)',
                        },
                        interval: 0
                    },
                    // 轴线文字内容设置
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgb(21,136,189)"
                        },
                    },
                    // 是否显示轴线的刻度标签
                    axisTick: {
                        show: false
                    },
                    
                },
                grid:{
                    top: 10,
                    bottom: 60,
                    left: 10,
                    right: 10,
                    containLabel: true
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(68, 142, 248, 0.1)',
                        },
                        itemStyle: {
                            // color: 'rgba(68, 142, 248, 1)'
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: 'rgb(6,74,104)' },
                                { offset: 1, color: 'rgb(6,204,253)' }
                            ])
                        },
                        barMaxWidth: '36%',
                    }
                ]
            }
            option.yAxis.data = ['质量部','采购部','综合部','工程部','商务部']
            option.series[0].data = [10,20,30,40,50]
            return option && chart.setOption(option)
        }
        watchEffect(() => {
            let getData = props.letTopData;
            if(getData !== ''){
                let setArr = JSON.parse(getData);
                setArr.map((i: any, inx: any) => {
                    i.color = colorArr[inx];
                });
                console.log(setArr,'setArr')
                liData.value = setArr;
                isFinish = true;
                optionRing();
            }
        });
        onMounted(() => {
            nextTick(() => {
                isFinish = false;
                optionLine()
            })
        })
        
        return {
            ringChar,
            lineChar,
            liData,
        }
    }
})
</script>
<style lang="scss" scoped>
#v-left-t{
    height: 100%;
    width: 100%;
    .e-row-r{
        height: 72%;
        width: 92%;
        margin: 6vh auto 0 auto;
        // overflow: hidden;
        .line-s{
            height: 100%;
            span{
                display: block;
                width: 100%;
                text-align: center;
                margin-bottom: 5px;
            }
        }
    }
    .legend-u{
        margin-top: 2vw;
        li{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 10px;
            span{
                display: block;
            }
            .legend-s-1{
                background: rgb(6,235,125);
            }
            .legend-s-2{
                background: rgb(223,49,69);
            }
            .legend-s-3{
                background: rgb(223,184,38);
            }
            .legend-s{
                width: 12px;
                height: 12px;
                margin-right: 5px;
            }
        }
    }
}
</style>